﻿@model IEnumerable<WriterStars.Model.Category>

<style>
    .category-container{
        margin-bottom:20px;
    }
    .category-container .category {
        color: white;
        height: 150px;
        padding:10px;
    }

    .category-container .category-info{
        padding:0 10px;
    }

    .category-container footer {
            text-align: left;
            font-weight: normal;
            font-size: 12px;
            background-color: #A6A7A8;
            color: white;
            border-radius: 0 0 3px 3px;
            padding: 0 10px;
            text-shadow: 0 0 0 transparent, 1px 1px 0px #656565;
            height: 27px;
            line-height: 27px;
            background-image: -webkit-linear-gradient(top, #bcbec0 0%, #979797 100%);
        }
    .category-container header h5{
        color:white;
        padding:0 10px;
    }
    
</style>

<section class="col-xs-12 col-md-8">
    <div id="categories-list" class="row">
        @Html.EditorFor(model => model)
    </div>

</section>
<aside id="create-category" class="col-xs-12 col-md-4">
    @{
        var category = new WriterStars.Model.Category();
    }
    @using (Ajax.BeginForm("Categories", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "categories-list", OnSuccess="clearForm" }))
    {
        <h5>Add new category</h5>
        @Html.ValidationMessageFor(x => category.Name)<br />
        @Html.EditorFor(x => category.Name)<br />
        
        @Html.ValidationMessageFor(x => category.Color)<br />
        @Html.EditorFor(x => category.Color)

        <br />
        <br />
        <button type="submit">Cerate</button>
    }

</aside>
@section scripts{
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script>
        function clearForm() {
            $('#create-category input').val('');
        }
    </script>
}
